{extend name="common/base" /}
{block name="body"} 
<div class="Content" id="content">
    <div class="container">
        <!-- 搜索栏 -->
        <form class="layui-form search-form SearchCom " lay-filter="searchForm">
            <div class="OrderSearcItem">
              

            

                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-search"></i>
                        </div>
                        <input type="text" name="keyword" placeholder="订单号/买家/商品名" class="layui-input" value="{$Request.param.keyword|default=''}">
                    </div>
                    <button class="layui-btn layui-btn-blue" style="margin-right: 20px;" lay-submit lay-filter="search">查询</button>
                </div>
            </div>
        </form>

        <!-- 商品表格 -->
        <table class="layui-hide" id="productTable" lay-filter="productTable" lay-skin="line"></table>
    </div>



    <!-- 操作按钮模板 -->
    <script type="text/html" id="operateTpl">
        <div class="foot">
            <a class="btn-delete" lay-event="delete" style="color: #ff5722;">删除</a>
        </div>
    </script>
</div>
{/block}

{block name="js"} 
<script>
    changeTitleName('评论管理')
    function showImageLightbox(currentImg) {
        window.open(currentImg, '_blank');
    }
    layui.use(['table', 'form', 'laydate','layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
       
        

        // 初始化表格
        var tableIns = table.render({
            elem: '#productTable',
            url: '/merchant/merchant-order-review',
            height: 'full-100',

            page: {
                limit: 17,
                limits: [10, 17, 20, 30],
                groups: 5,
                prev: '<',
                next: '>',
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                theme: '#1E9FFF'
            },
            cols: [
                [
                    {
                        field: 'store_name',
                        title: '商品信息',
                        width:400,
                        templet: function(d) {
                            // 这里假设商品图片字段是 thumb 或 image
                            var imgUrl = d.image ;
                            
                            return `
                                <div style="display: flex; align-items: center;">
                                    <div style="width: 50px; height: 50px; margin-right: 10px;">
                                        <img src="${imgUrl}" style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
                                    <div>${d.store_name || '无名称'}</div>
                                </div>
                            `;
                        }
                    },
                    
                    {
                        field: 'order_id', 
                        title: '订单信息', 
                        width: 300,
                        templet: function(d) {
                            // 确保有订单数据
                            const order = d.order || {};
                            
                            // 格式化支付时间
                            const payTime = order.pay_time ? new Date(order.pay_time * 1000).toLocaleString() : '未支付';
                            
                            return `
                                <div style="line-height: 1.6;">
                                    <div>
                                        <span style="font-weight: bold;">订单编号：</span>
                                        <span>${order.order_id || '无'}</span>
                                    </div>
                                    <div>
                                        <span style="font-weight: bold;">支付金额：</span>
                                        <span style="color: #f56c6c;">¥${order.pay_price || '0.00'}</span>
                                    </div>
                                    <div>
                                        <span style="font-weight: bold;">支付时间：</span>
                                        <span style="color: #909399;">${payTime}</span>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    { field: 'comments', title: '评价内容' ,width:400, },
                    {
                        field: 'images',
                        title: '评价图片',
                        width: 200,
                        templet: function(d) {
                            // 确保images是数组格式（如果是字符串先分割）
                            let images = Array.isArray(d.images) ? d.images : 
                                        (typeof d.images === 'string' ? d.images.split(',') : []);
                            
                            // 过滤空值
                            images = images.filter(img => img && img.trim());
                            
                            if (images.length === 0) return '无图片';
                            
                            return `
                                <div style="display: flex; flex-wrap: wrap; gap: 5px;">
                                    ${images.map(img => `
                                        <img src="${img}" 
                                             style="width: 50px; height: 50px; object-fit: cover; cursor: pointer;"
                                             onclick="showImageLightbox('${img}')">
                                    `).join('')}
                                </div>
                            `;
                        }
                    },
                    {
                        field: 'user',
                        title: '评价用户',
                        width: 180,
                        templet: function(d) {  
                            return `
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <img src="${d.avatar}" 
                                         style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                                    <div style="font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                                            ${d.user.nickname || '匿名用户'}
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        field: 'level',
                        title: '评价等级',
                        width: 200,
                        templet: function(d) {
                            const level = parseInt(d.level) || 0;
                            const maxLevel = 5; // 最大5星
                            
                            return `
                                <div style="color: #FFB800; font-size: 16px;">
                                    ${Array.from({length: maxLevel}, (_, i) => 
                                        `<i class="layui-icon ${i < level ? 'layui-icon-rate-solid' : 'layui-icon-rate'}"></i>`
                                    ).join('')}
                                    <span style="color: #666; font-size: 14px; margin-left: 5px;">${level}.0</span>
                                </div>
                            `;
                        }
                    },
                    { field: 'create_time', title: '评价时间' },
                    {
                        title: '操作',
                        width: 160,
                        toolbar: '#operateTpl'
                    }
                ]
            ]
        });


        table.on('tool(productTable)', function(obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'delete':
                    layer.confirm('确定要删除这条评论吗？', function(index){
                        $.post('/merchant/merchant-review-delete', {
                            id: data.id
                        }, function(res){
                            if(res.code === 200){
                                layer.msg('删除成功', {icon: 1});
                                tableIns.reload();
                            }else{
                                layer.msg(res.msg || '删除失败', {icon: 2});
                            }
                        });
                        layer.close(index);
                    });
                    break;
                case 'cancel':
                    // 原有取消订单逻辑...
                    break;
                case 'deliver':
                    // 原有发货逻辑...
                    break;
                case 'refund':
                    // 原有退款逻辑...
                    break;
            }
        });

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }

        // 更新URL参数（不刷新页面）
        function updateUrlParam(key, value) {
            var url = window.location.href;
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = url.indexOf('?') !== -1 ? "&" : "?";
            
            if (url.match(re)) {
                url = url.replace(re, '$1' + key + "=" + value + '$2');
            } else {
                url = url + separator + key + "=" + value;
            }
            
            history.pushState(null, null, url);
        }

        // 监听窗口大小变化
        window.onresize = function() {
            table.resize('productTable');
        };
    });
</script>
{/block}